<template>
  <div class="Study">
    <crumb />
    <div class="course-study main-contianer2">
      <div class="left-list">
        <LeftTreeList :list="list" @viewNode="viewNode" />
      </div>
      <div class="right-content">
        <!-- 未选中 -->
        <div class="no-data" v-if="type == 0">
          <div class="main-left-img">
            <img src="@/assets/images/course-01.png" alt />
          </div>
          <p>暂无在学课程</p>
          <div style="text-align: center;margin-top:50px;">
            请在左侧课程目录里选择课程进行学习
          </div>
        </div>
        <!--  -->
        <div class="study-box" v-else-if="type === 1">
          <template v-for="(item, index) in studyList">
            <template v-if="studyI === index">
              <el-button class="btn-prev" :key="index" v-if="studyList.length > 1 && index !== 0" @click="studyI = studyI - 1">上一页</el-button>
              <el-button class="btn-next" :key="index" v-if="studyList.length > 1 && index !== studyList.length" @click="studyI = studyI + 1">下一页</el-button>
              <!-- 纯文本 -->
              <div class="media-box" v-if="item.chapterType === '1'" :key="index" v-html="item.content"></div>
              <!-- 图片 -->
              <div class="media-box" v-else-if="item.chapterType === '2'" :key="index">
                <img :src="item.fileUrl" style="width:100%;height:100%">
              </div>
              <!-- 音频 -->
              <div class="media-box" v-else-if="item.chapterType === '3'" :key="index">
                <audio class="audio" controls :src="item.fileUrl"></audio>
              </div>
              <!-- 视频 -->
              <div class="media-box" v-else-if="item.chapterType === '4'" :key="index">
                <video class="video" controls :src="item.fileUrl" @ended="updateProcessRate()">
                  <track :src="item.subtitlesEnUrl" srclang="en" label="English" kind="subtitles" default />
                </video>
              </div>
              <div v-else class="media-box" :key="index"></div>
            </template>
          </template>
          <CompleteList style="padding: 10px 20px;"  :resourceLessonChapterId="resourceLessonChapterId" :list="finishedList" :size="finishedSize" />
          <lessonTabs :studyInfo="studyList[studyI]" :resourceLessonChapterId="resourceLessonChapterId"></lessonTabs>
        </div>
        <div class="test-box" v-else-if="type === 2">
          <TestContent :resourceLessonChapterId="resourceLessonChapterId"></TestContent>
        </div>
        <div v-else-if="type === 3">
          <Statistical></Statistical>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftTreeList from '@/components/LeftTreeList'
import {
  studyIndex,
  studyMain,
  updateDuration,
  updateProcessRate,
  checkLessonSetDetail
} from '@/api/student/lesson/study'
import lessonTabs from '@/views/student/components/lessonTabs'
import CompleteList from '@/views/student/components/CompleteList'
import TestContent from '@/views/student/components/test/index'
import Statistical from '@/views/student/components/test/Statistical'
import { setInterval, clearInterval } from 'timers'
import { Promise } from 'q'
export default {
  components: {
    LeftTreeList,
    lessonTabs,
    CompleteList,
    TestContent,
    Statistical
  },
  data () {
    return {
      list: [],
      timer: null,
      type: 0, // 1 学习 2-测验 3-统计
      resourceLessonChapterId: 0, // 章节id
      studyList: [],
      finishedList: [],
      finishedSize: 0,
      studyI: 0 // 当前下标
    }
  },
  methods: {
    async studyIndex () {
      const res = await studyIndex()
      this.list = res.data.lessonList
    },
    async getMain () {
      const res = await studyMain({
        resourceLessonChapterId: this.resourceLessonChapterId
      })
      this.studyList = res.data.contentList
      this.finishedList = res.data.finishedList
      this.finishedSize = res.data.finishedSize
    },
    updateDuration () {
      updateDuration({
        resourceLessonChapterId: this.resourceLessonChapterId
      })
    },
    updateProcessRate () {
      updateProcessRate({
        id: this.studyList[this.studyI].detailId,
        processRate: '100'
      })
    },
    async viewNode (type, data) {
      this.resourceLessonChapterId = data.chapterId
      if (type === 1) {
        // if (await this.checkLessonSetDetail(data.chapterId, 1) === false) {
        //   return false
        // }
        clearInterval(this.timer)
        this.timer = null
        this.timer = setInterval(() => {
          this.updateDuration()
        }, 8000)
        this.$once('hook:beforeDestroy', () => {
          clearInterval(this.timer)
          this.timer = null
        })
        this.getMain()
      } else if (type === 2) {
        // if (await this.checkLessonSetDetail(data.chapterId, 2) === false) {
        //   return false
        // }
      }
      this.type = Number(type)
      this.resourceLessonChapterId = data.chapterId
      if (this.type !== 1) {
        clearInterval(this.timer)
        this.timer = null
      }
    },

    async checkLessonSetDetail (resourceLessonChapterId, lessonSetType) {
      return new Promise(async (resolve, reject) => {
        const res = await checkLessonSetDetail({
          resourceLessonChapterId,
          lessonSetType
        })
        if (res.code === '200') {
          if (res.data.openedStatus === '1') {
            resolve(true)
          } else {
            this.$message.error(res.data.alertMessage)
            resolve(false)
          }
        } else {
          this.$message.error(res.message)
          resolve(false)
        }
      })
    }
  },
  mounted () {
    this.studyIndex()
  }
}
</script>

<style scoped lang="scss">
.Study {
  margin-top: 0;
  .course-study {
    .left-list {
      width: 452px;
      height: 100%;
    }
    .right-content {
      width: 728px;
      height: 100%;
      background: #fff;
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      overflow-y: scroll;
      .no-data {
        .main-left-img {
          width: 235px;
          height: 106px;
          background-color: #000;
          margin: 0 auto;
          margin-top: 160px;
          img {
            height: 100%;
            width: 100%;
          }
        }
        p {
          font-size: 16px;
          font-weight: 400;
          color: rgba(16, 29, 55, 1);
          text-align: center;
          margin-top: 20px;
        }
      }
      .study-box {
        position: relative;
        .media-box {
          width: 727px;
          height: 280px;
          .video {
            width: 727px;
            height: 280px;
            outline: none;
          }
        }
        .btn-prev {
          position: absolute;
          right: 140px;
          top: 20px;
          z-index: 9999;
        }
        .btn-next {
          position: absolute;
          right: 20px;
          top: 20px;
          z-index: 9999;
        }
      }
    }
  }
}
</style>
